<template>
  <div class="businessIndicatorsContainer">
    <div class="quotaItem coreBusinesses">
      <div class="title"><img src="../../img/rectangle.png" alt="" />核心业务</div>
      <div class="businessesNumberContainer">
        <div class="numContainer">
          <div class="unit">
            <span class="num">{{ coreData.baseData.coreBusinessesNum }}</span
            >个
          </div>
          <div>核心业务数</div>
        </div>
        <div class="numContainer">
          <div class="unit">
            <span class="num">{{ coreData.baseData.firstBusinessesNum }}</span
            >个
          </div>
          <div>一级业务数</div>
        </div>
        <div class="numContainer">
          <div class="unit">
            <span class="num">{{ coreData.baseData.secondBusinessesNum }}</span
            >个
          </div>
          <div>二级业务数</div>
        </div>
      </div>
      <div class="coreBusiness" id="coreBusiness"></div>
      <div class="coreDataToolNum">{{ coreData.baseData.toolNum }}</div>
    </div>
    <div class="quotaItem digitizationRate">
      <div class="title">
        <img src="../../img/rectangle.png" alt="" />业务事项数字化率<span class="rate">{{ digitizationRateData.rate }}</span>
      </div>
      <div class="secondTitle">
        业务事项总数： <span class="digitizationRateDataToolNum">{{ digitizationRateData.toolNum }}</span
        ><span class="unit">个</span>
      </div>
      <div class="digitizationRate" id="digitizationRate"></div>
    </div>
    <div class="quotaItem indexListContainer">
      <div class="title" @click="formData('指标清单')"><img src="../../img/rectangle.png" alt="" />指标清单</div>
      <div class="secondTitle">
        指标数量： <span class="indexListToolNum">{{ indexListData.toolNum }}</span
        ><span class="unit">个</span>
      </div>
      <div class="indexList" id="indexList"></div>
    </div>
    <Dialog :visible="bslwsVisible" dataChange="4" @close="bslwsVisible = false" :title="name">
      <Table
        :currentPage="tableOptions.currentPage"
        :pageSize="tableOptions.pageSize"
        :columns="tableOptions.columns"
        :total="tableOptions.total"
        :tableData="tableOptions.tableData"
        @pageSizeChange="pageSizeChange"
        @currentChange="currentChange"
        @queryTableData="queryTableData"
      />
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import Dialog from "../Dialog2.vue";
import Table from "@/components/tables/Table.vue";
import {
  GETnumberCoreDusinesses,
  GETBusinessMatterPercentage,
  GETBusinessMatter,
  GETindicatorType,
  GETindicatorTypePercentage,
  GETgetIndicatorIsEvaluable,
  GETcountIndicatorTypeRetrospective,
  GETcountIndicatorType,
  GETdigitalAssetsFirstBusinessCount,
  GETdigitalAssetsSecondBusinessCount,
  GETDigitalAssetsDdtxzbCount,
  GETdigitalAssetsBusinessCountTwo,
  GETdigitizedBusinessCountTwo,
  GETdigitizedBunDgitizedBusinessCountTwo,
  getzZbCountMx,
} from "@/api/Digitalassets.js";
const bslwsVisible = ref(false);
const name = ref("");

const tableOptions = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  columns: [
    {
      prop: "id",
      label: "指标ID",
    },
    {
      prop: "responsibleOrg",
      label: "责任单位",
    },
    {
      prop: "scenarioName",
      label: "指标名称",
    },
  ],
  tableData: [],
});

const pageSizeChange = (val) => {
  tableOptions.value.pageSize = val;
  getTableData(tableOptions.value.currentPage, tableOptions.value.pageSize);
};

const currentChange = (val) => {
  tableOptions.value.currentPage = val;
  getTableData(val, tableOptions.value.pageSize);
};

const queryTableData = (val) => {
  // TODO: 模糊查询，接口未做
  tableOptions.value.currentPage = 1;
  getTableData(1, tableOptions.value.pageSize);
};

const formData = (val) => {
  bslwsVisible.value = true;
  name.value = val;
  getTableData(1, 10);
};

const getTableData = async (current, pageSize) => {
  const {
    data: { records: tableData, totalRow },
  } = await getzZbCountMx({
    pageNumber: current,
    pageSize,
  });
  tableOptions.value.tableData = tableData;
  tableOptions.value.total = totalRow;
};

const coreData = ref({
  baseData: {
    coreBusinessesNum: 7,
    firstBusinessesNum: 27,
    secondBusinessesNum: 107,
    toolNum: 2000,
  },
  eChartsData: [
    { value: 1048, name: "和美乡村建设" },
    { value: 735, name: "工程建设管理" },
    { value: 580, name: "城市基础设施建设" },
    { value: 484, name: "房地产市场发展" },
    { value: 300, name: "居民住房保障" },
    { value: 300, name: "建筑产业现代化" },
    { value: 300, name: "城市更新提升" },
  ],
});

const initCoreBusiness = () => {
  const chartDom = document.getElementById("coreBusiness");
  const myChart = echarts.init(chartDom);

  myChart.setOption({
    tooltip: {
      trigger: "item",
      // formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["80%", "45%"],
        center: ["50%", "50%"],
        label: {
          show: false,
          position: "center",
          formatter: "{b}\n{c}个",
          fontSize: 12,
          color: "#fff",
        },

        data: coreData.value.eChartsData,
      },
    ],
  });
};

/**
 * 获取核心业务接口数据
 * 真尼玛无语，sx操作，一个echarts数据，n个请求
 */
const getCoreData = async () => {
  try {
    const {
      data: { count: coreBusinessesNum },
    } = await GETnumberCoreDusinesses(); // 核心业务数
    const {
      data: { count: firstBusinessesNum },
    } = await GETdigitalAssetsFirstBusinessCount(); // 一级业务数
    const {
      data: { count: secondBusinessesNum },
    } = await GETdigitalAssetsSecondBusinessCount(); // 二级业务数
    const { data: eChartsData } = await GETdigitalAssetsBusinessCountTwo(); // 饼图数据
    let tool = 0;
    eChartsData.forEach((item) => {
      tool += Number(item.value);
    });
    console.log("tool", tool);
    coreData.value = {
      eChartsData,
      baseData: {
        coreBusinessesNum,
        firstBusinessesNum,
        secondBusinessesNum,
        toolNum: tool, // TODO: 未有接口，后续需要对接
      },
    };
  } catch (error) {
    console.error("数字资产一本账-业务&指标-核心业务，请求错误");
  } finally {
    initCoreBusiness();
  }
};

const digitizationRateData = ref({
  rate: 100,
  toolNum: 2076,
  eChartsData: {
    xAxis: ["生产生活服务", "社会治理", "应急动员", "设施运行", "生态景观", "文明创建", "党建统领"],
    seriesData: {
      beforeDigitization: [110, 115, 122, 141, 214, 123, 149],
      afterDigitization: [114, 123, 152, 124, 121, 125, 128],
    },
  },
});

const initDigitizationRate = () => {
  const chartDom = document.getElementById("digitizationRate");
  const myChart = echarts.init(chartDom);

  myChart.setOption({
    title: {
      text: "单位：个",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: 0,
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "20%",
      bottom: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: [
      {
        type: "category",
        data: digitizationRateData.value.eChartsData.xAxis,
        axisLabel: {
          show: false,
          interval: 0,
          rotate: -25,
          color: "#fff",
          fontSize: 10,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#cdd5e2",
          },
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "已数字化",
        type: "bar",
        stack: "Ad",
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#30D3EF",
              },
              {
                offset: 1,
                color: "#3178EF",
              },
            ]),
            borderRadius: [9, 9, 0, 0],
          },
        },
        data: digitizationRateData.value.eChartsData.seriesData.beforeDigitization,
      },
      {
        name: "未数字化",
        type: "bar",
        stack: "Ad",
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#30DBE9",
              },
              {
                offset: 1,
                color: "#44F1B6",
              },
            ]),
            borderRadius: [9, 9, 0, 0],
          },
        },
        data: digitizationRateData.value.eChartsData.seriesData.afterDigitization,
      },
    ],
  });
};

/**
 * 获取业务事项数字化率接口数据
 * 真尼玛无语，sx操作，一个echarts数据，n个请求
 */
const getDigitizationData = async () => {
  try {
    const {
      data: { count },
    } = await GETBusinessMatter();
    const {
      data: { value: rate },
    } = await GETBusinessMatterPercentage();
    const { data: beforeData } = await GETdigitizedBusinessCountTwo();
    const { data: afterData } = await GETdigitizedBunDgitizedBusinessCountTwo();
    console.log("eChartsData", beforeData);
    const names = [];
    const beforeDigitization = [];
    const afterDigitization = [];
    beforeData.forEach((item) => {
      names.push(item.name);
    });
    beforeData.forEach((item) => {
      names.forEach((it) => {
        if (item.name === it) {
          beforeDigitization.push(item.value);
        }
      });
    });
    afterData.forEach((item) => {
      names.forEach((it) => {
        if (item.name === it) {
          afterDigitization.push(item.value);
        }
      });
    });
    digitizationRateData.value = {
      rate,
      toolNum: count,
      eChartsData: {
        xAxis: names,
        seriesData: {
          beforeDigitization,
          afterDigitization,
        },
      },
    };
  } catch (err) {
    console.error("数字资产一本账-业务&指标-业务事项数字化率，请求错误");
  } finally {
    initDigitizationRate();
  }
};

const indexListData = ref({
  toolNum: 86754,
  eChartsData: {
    xAxis: ["可分级指标", "可评价指标", "动态性指标", "可回溯指标", "可分类指标", "城市体征指标", "KPI指标"],
    seriesData: [120, 110, 119, 113, 124, 124, 119, 109],
  },
});

const initIndexList = () => {
  const chartDom = document.getElementById("indexList");
  const myChart = echarts.init(chartDom);

  myChart.setOption({
    title: {
      text: "单位：个",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: 0,
      icon: "circle",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      top: "20%",
      bottom: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: [
      {
        type: "category",
        data: indexListData.value.eChartsData.xAxis,
        axisLabel: {
          show: false,
          interval: 0,
          rotate: -15,
          color: "#fff",
          fontSize: 10,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "指标数",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barWidth: 10,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#3178EF",
              },
              {
                offset: 1,
                color: "#30D3EF1A",
              },
            ]),
            borderRadius: [9, 9, 0, 0],
          },
        },
        data: indexListData.value.eChartsData.seriesData,
      },
    ],
  });
};

/**
 * 获取指标清单接口数据
 * 真尼玛无语，sx操作，一个echarts数据，n个请求
 */
const getIndexListData = async () => {
  try {
    const toolNum = await GETindicatorType();
    const {
      data: { count: percentage },
    } = await GETindicatorTypePercentage(); // 可分级指标数
    const {
      data: { count: evaluable },
    } = await GETgetIndicatorIsEvaluable(); // 可评价指标数
    const {
      data: { count: retrospective },
    } = await GETcountIndicatorTypeRetrospective(); // 可回溯指标数
    const {
      data: { count: indicatorType },
    } = await GETcountIndicatorType(); // 可分类指标
    const {
      data: { count: dynamicIndicators },
    } = await GETDigitalAssetsDdtxzbCount(); // 动态性指标
    indexListData.value.toolNum = toolNum.data.count;
    indexListData.value.eChartsData.seriesData = [percentage, evaluable, dynamicIndicators, retrospective, indicatorType, 0, 0];
  } catch (err) {
    console.error("数字资产一本账-业务&指标-指标清单，请求错误");
  } finally {
    initIndexList();
  }
};

onMounted(() => {
  getCoreData();
  getDigitizationData();
  getIndexListData();
});
</script>
<style scoped langs="scss">
.businessIndicatorsContainer {
  margin-top: 10px;
  width: 100%;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .quotaItem {
    width: 336px;
    height: 100%;
    border-radius: 4px;
    background-image: url("../../img/quotaBackground.png");
    position: relative;

    .title {
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 10%;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      padding: 10px;

      img {
        width: 8px;
        height: 8px;
        margin-right: 12px;
      }
    }

    .businessesNumberContainer {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .numContainer {
        font-size: 12px;
        font-family: Alimama ShuHeiTi;
        font-weight: 700;
        letter-spacing: 0.53px;

        .unit {
          color: #37c9c9;

          .num {
            font-family: DINPro;
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0px;
            margin-right: 4px;
          }
        }
      }
    }

    .coreBusiness {
      width: 300px;
      height: 160px;
      margin: auto;
    }

    .coreDataToolNum {
      position: absolute;
      bottom: 60px;
      right: 156px;
      font-size: 12px;
      color: #15bdff;
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
    }
  }

  .digitizationRate {
    .rate {
      font-family: DINPro;
      font-weight: 700;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0;
      color: #37c9c9;
      margin-left: 16px;
    }

    .secondTitle {
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 10px;
      line-height: 100%;
      letter-spacing: 0.53px;
      margin-left: 10px;

      .digitizationRateDataToolNum {
        font-size: 12px;
        color: #37c9c9;
        font-family: Alimama ShuHeiTi;
        font-weight: 700;
      }

      .unit {
        color: #37c9c9;
        margin-left: 4px;
      }
    }

    .digitizationRate {
      width: 300px;
      height: 160px;
      margin: auto;
    }
  }

  .indexListContainer {
    .secondTitle {
      font-family: Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 10px;
      line-height: 100%;
      letter-spacing: 0.53px;
      margin-left: 10px;

      .indexListToolNum {
        font-size: 12px;
        color: #37c9c9;
        font-family: Alimama ShuHeiTi;
        font-weight: 700;
      }

      .unit {
        color: #37c9c9;
        margin-left: 4px;
      }
    }

    .indexList {
      width: 300px;
      height: 160px;
      margin: auto;
    }
  }
}
</style>
